<template lang="">
  <div  ref="container" class="map-container"></div>
  
  <!-- <div ref="container" class="map-container"></div> -->
</template>
<script setup>
import {ref, onMounted} from "vue";
const container = ref(null);
onMounted(() => {
  const mapContainer = container.value;
  console.log(mapContainer);
  var map = new maptalks.Map(mapContainer, {
    center: [110.113049, 40.498568],
    zoom: 5,
    baseLayer: new maptalks.TileLayer('base', {
      urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
      subdomains: ['a','b','c','d'],
      attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
    })
  });
})
</script>

<style>
.map-container{
  flex: 1;
}
</style>